new Vue({
    el: '#app',
    data: {
        value:0,
        budget:50,
        modalSearch: false,
        modal_loading: false,
        modalMes: false,
        mes_loading: false,
        hot:[],
        city_id: window.localStorage.getItem('city_id'),
        price_city_id: window.localStorage.getItem('city_id'),
        cityName:window.localStorage.getItem('city_name'),
        newPrice: 0,
        handPrice: 0,
        latestMonth:0,
        rate:0,
        article:[],
        priceClass: '',
        loading: false,
        keywords: '',
        month: [],
        average: [],
        curType:0,
        searchUrl: '',
        searchData: [
            {
                title: '热门搜索',
                children: [
                    {
                        title: '美丽沙',

                    },
                    {
                        title: '碧桂园',

                    }
                ]
            }
        ],
    },
    methods: {
        format(val) {
            return val + '万';
        },
        changeType(type) {
            this.curType = type
            var that = this
            switch (type) {
                case 0:
                    that.searchUrl = '/hand/'+ that.city_id + '?keyword=' + that.keywords;
                    break;
                case 1:
                    that.searchUrl = '/newhouse/'+ that.city_id + '?keyword=' + that.keywords;
                    break;
                case 2:
                    that.searchUrl = '/rental/'+ that.city_id + '?keyword=' + that.keywords;
                    break;
                case 3:
                    that.searchUrl = '/community/'+ that.city_id + '?keyword=' + that.keywords;
                    break;
            }
        },
        handleSearch(){
            this.changeType(this.curType)
            if(this.keywords.length){
                window.location.href = this.searchUrl
            }else{
                this.$Message.warning('关键词不能为空')
            }
        },
        sendMes() {
            alert('123')
            this.mes_loading = true
        },
        getData(){
            this.loading = true
            var that = this
            var formData = {
                city_id:that.city_id,
            }
            axios.post('/indexData',formData).then(function (res) {
                if(res.data.code === 0){
                    that.loading = false
                    that.cityIndex = res.data.cityIndex
                    that.hot = res.data.hot
                    that.month = res.data.month
                    that.average = res.data.average
                    that.newPrice = res.data.newPrice
                    that.handPrice = res.data.handPrice
                    that.latestMonth = res.data.latestMonth
                    that.rate = res.data.rate
                    that.article = res.data.article
                    if(res.data.rate < 0){
                        that.priceClass = 'down'
                    }else{
                        that.priceClass = 'up'
                    }

                    // that.$nextTick(() => {
                        that.initChart()
                    // })
                }else{
                    that.$Message.error('数据获取失败，请稍后再试')
                }
            }).catch(function (error) {
                that.loading = false
            });
        },
        getAverageData(){
            this.loading = true
            var that = this
            var formData = {
                city_id:that.price_city_id,
            }
            axios.post('/getAverageData',formData).then(function (res) {
                if(res.data.code === 0){
                    that.month = res.data.month
                    that.average = res.data.average
                    that.newPrice = res.data.newPrice
                    that.handPrice = res.data.handPrice
                    that.latestMonth = res.data.latestMonth
                    that.rate = res.data.rate
                    that.cityName = res.data.cityName
                    if(res.data.rate < 0){
                        that.priceClass = 'down'
                    }else{
                        that.priceClass = 'up'
                    }

                    that.initChart()
                }else{
                    that.$Message.error('数据获取失败，请稍后再试')
                }
            }).catch(function (error) {

            });
        },
        initChart(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('trendmap'),'dark');
            // 指定图表的配置项和数据\
            var that = this
            myChart.setOption ({
                backgroundColor:'#282E3D',
                title:{
                    left:'5',
                    top:'10',
                    text:'价格(元)',
                    textStyle:{
                        color:'#ccc',
                        //'normal','italic','oblique'
                        fontStyle:'100',
                        fontWeight:'bold',
                        fontSize:12,
                    }
                },
                toolbox: {
                    show : true,
                    right:'5',
                    top:'5',
                    feature : {
                        // mark : {show: true},
                        // dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['bar']},
                        restore : {show: true},
                        // saveAsImage : {show: true}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgb(104, 114, 139, 0.9)',
                    // borderColor:'#FFF',
                    borderRadius: 5,
                    textStyle:{
                        color:'#FFF',
                        // extraCssText: 'box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);'
                    }
                },
                legend: {
                    top:'10',
                    data:[that.cityName]
                },
                xAxis : [
                    {
                        // ["1月","2月","3月","4月","5月","6月"]
                        type : 'category',
                        data : that.month,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#7a7f8c'
                            }
                        }
                    }
                ] ,
                yAxis: {
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#7a7f8c'
                        }
                    }
                },
                series: [{
                    color: ['#FFBC26'],
                    type: 'line',
                    name: that.cityName,
                    data : that.average
                }]
            });
        },
        changeCity(city_id){
            this.price_city_id = city_id
            this.getAverageData();
        }
    },
    mounted() {
        this.getData()
        // var that = this
        // setTimeout(function () {
        //     that.initChart()
        // },100)
    }
})